<template>
  <page-container>
    <el-form-item>
      <el-button type="primary" @click="openDialog('0')">新增</el-button>
    </el-form-item>

    <page-table
      ref="tableRef"
      :data="tableData"
      row-key="id"
      style="width: 100%"
      :tree-props="{ children: 'children' }"
      :align="'center'"
      show-overflow-tooltip
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="name" label="菜单名" min-width="200px" />
      <el-table-column prop="parentId" label="父级Id" />
      <el-table-column prop="path" label="路由路径" />
      <el-table-column prop="icon" label="图标" />
      <el-table-column prop="sort" label="序号" />
      <el-table-column prop="type" label="类型">
        <template #default="{ row }">
          <span v-if="row.type === 0">目录</span>
          <span v-if="row.type === 1">菜单</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160px">
        <template #default="{ row }">
          <el-button type="primary" link @click="openDialog('0', row)">新增</el-button>
          <el-button type="success" link @click="openDialog('1', row)">编辑</el-button>
          <el-button type="danger" link @click="deleteMenu(row)">删除</el-button>
        </template>
      </el-table-column>
    </page-table>

    <!-- 新增、编辑、查看菜单详情的弹窗 -->
    <addOrEditDialog
      v-model:visible="dialogVisible"
      :dialogTitle="dialogTitle"
      :dialogType="dialogType"
      :currentMenu="currentMenu"
      :parentId="parentId"
      @submit="handleSubmit"
    />
  </page-container>
</template>

<script setup lang="ts">
import { getMenuListReq } from '@/api/menu'
import { addMenuReq, editMenuReq, deleteMenuReq } from '@/api/menu/index'
import addOrEditDialog from './components/addOrEditDialog.vue'
import { MenuMould } from '@/api/menu/types/index'

const tableData = ref()

onMounted(async () => {
  await initTreeData()
})

// 获取属性的菜单栏结构
const initTreeData = async () => {
  const res = await getMenuListReq()
  if (res.code === 1) {
    tableData.value = res.data
  }
}

/**
 * 弹窗相关参数
 */
// '0' 新增 '1' 编辑 '2' 查看
const dialogType = ref('0')
// 弹窗标题
const dialogTitle = ref('')
// 弹窗的打开与关闭
const dialogVisible = ref(false)
// 详细数据，编辑时才有，并有菜单id
const currentMenu = ref<MenuMould.IMenuItem | {}>({})
// 新增或编辑的菜单的父id - 默认'0',即生成一级目录
const parentId = ref(0)
// 打开新增/编辑弹窗
const openDialog = (type: string, row?: MenuMould.IMenuItem | {}) => {
  dialogType.value = type
  dialogTitle.value = type === '0' ? (row ? '新增子路由' : '新增一级路由') : '编辑路由'
  currentMenu.value = row ? { ...row } : {}
  dialogVisible.value = true

  //若新增一级路由，则parentId 不修改还是0，否则就是新增/编辑子路由，赋值为 row.id
  if (row) {
    // @ts-ignore
    parentId.value = row?.id
  }
}

// 监听子组件的 新增/编辑的提交
const handleSubmit = async (menu: MenuMould.IMenuItem, type: string) => {
  // 若是新增
  if (type === '0') {
    const res = await addMenuReq(menu)
    if (res.code === 1) {
      ElMessage.success('新增成功')
      initTreeData()
    }
  } else if (type === '1') {
    // 若是编辑
    const res = await editMenuReq(menu)
    if (res.code === 1) {
      ElMessage.success('编辑成功')
      initTreeData()
    }
  }
}

// 删除
const deleteMenu = async (row: any) => {
  ElMessageBox.confirm(`确定删除菜单${row.name}?`, 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await deleteMenuReq(row.id)
      if (res.code === 1) {
        ElMessage.success('删除成功')
        initTreeData()
      }
    })
    .catch(() => {})
}
</script>
